<template>
    <div>
        <a-modal v-model:visible="visible" title="添加会员信息" @ok="onSubmit"  >
            <a-form :model="modelRef" name="添加会员" class="login-form" @finish="onFinish" :hideRequiredMark="true" @finishFailed="onFinishFailed">
                <a-form-item label="会员姓名" name="Vipname" v-bind="validateInfos.Vipname">
                    <a-input v-model:value="modelRef.Vipname" required>
                        <template #prefix>
                            <UserOutlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item label="手机号码" name="number" v-bind="validateInfos.number"    >
                    <a-input v-model:value="modelRef.number">
                        <template #prefix>
                            <phone-outlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item label="会员类型" name="type" v-bind="validateInfos.type">
                    <a-select v-model:value="modelRef.type" placeholder="请选择会员类型">
                        <a-select-option :value="0">普通会员</a-select-option>
                        <a-select-option :value="1">中级会员</a-select-option>
                        <a-select-option :value="2">高级会员</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="会员等级" name="grade" v-bind="validateInfos.grade">
                    <a-input v-model:value="modelRef.grade">
                        <template #prefix>
                            <golden-filled class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item label="累计消费" name="consume" v-bind="validateInfos.consume">
                    <a-input v-model:value="modelRef.consume">
                        <template #prefix>
                            <dollar-outlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item label="储存余额" name="balance" v-bind="validateInfos.balance">
                    <a-input v-model:value="modelRef.balance">
                        <template #prefix>
                            <dollar-outlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item label="累计储存" name="save" v-bind="validateInfos.save">
                    <a-input v-model:value="modelRef.save">
                        <template #prefix>
                            <dollar-outlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>
                <a-form-item label="&nbsp;&nbsp;&nbsp;积分&nbsp;&nbsp;&nbsp;&nbsp;" name="score" v-bind="validateInfos.score">
                    <a-input v-model:value="modelRef.score">
                        <template #prefix>
                            <to-top-outlined class="site-form-item-icon" />
                        </template>
                    </a-input>
                </a-form-item>

                <a-form-item label="开卡时间" name="begin" v-bind="validateInfos.begin">
                       <div>
                            <input class="time-input" type="date" style="width: 403px;height: 34px;" v-model="modelRef.begin"/>
                        </div>          
                </a-form-item>

                <a-form-item label="到期时间" name="over" v-bind="validateInfos.over">
                             <div>
                            <input class="time-input" type="date" style="width: 403px;height: 34px;" v-model="modelRef.over"/>
                           </div> 
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRaw, onMounted, onUnmounted, toRefs, withCtx } from 'vue';
import { Form } from 'ant-design-vue';
import Bus from '@/mitt/index'
import { UserOutlined, PhoneOutlined, GoldenFilled, DollarOutlined, ToTopOutlined, HistoryOutlined } from '@ant-design/icons-vue';
import { MockListAdd } from '@/api/VipApi'
const useForm = Form.useForm;
interface FormState {
    type: undefined,
    Vipname: string,
    grade: number,
    number: any,
    consume: any,
    balance: any,
    save: any,
    score: any,
    begin: string,
    over: string,
}
export default defineComponent({
    components: {
        UserOutlined, PhoneOutlined, GoldenFilled, DollarOutlined, ToTopOutlined, HistoryOutlined, 
    },
    emits :{
        'add':null, //自定义事件名 后面 :null 表示不进行验证
     },
    setup(props, ctx) {
        const visible = ref<boolean>(false);
        const showModal = () => {
            visible.value = true;
             resetFields()
             flag.value = 0
        };
        const handleOk = (e: MouseEvent) => {
            console.log(e);
            visible.value = false;
        };
        const flag = ref<number>(0)
        //From
        const rulesRef = reactive({
            Vipname: [
                {
                    required: true,
                    message: '会员姓名必须为汉字',
                    trigger: "blur",
                    pattern:/[\u4e00-\u9fa5|\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/ ,
                },
            ],
            type: [
                {
                    required: true,
                    message: '请选择会员类型',
                    trigger: "blur"
                },
            ],
            number: [
                {
                    required: true,
                    message: '请输入正确的手机号',
                    pattern: /^1[3-9]\d{9}$/,
                    trigger: "blur"
                },
            ],
            grade: [
                {
                    required: true,
                    message: '请输入合理的会员等级',
                    pattern:/^\d+$/,
                    trigger: "blur"
                },
            ],
            consume: [
                {
                    required: true,
                    message: '请输入累计消费',
                    pattern:/^\d+$/,
                    trigger: "blur"
                },
            ],
            balance: [
                {
                    required: true,
                    message: '请输入存储存余额',
                    pattern:/^\d+$/,
                    trigger: "blur"
                },
            ],
            save: [
                {
                    required: true,
                    message: '请输入累计储存',
                    pattern:/^\d+$/,
                    trigger: "blur"
                },
            ],
            score: [
                {
                    required: true,
                    message: '请输入积分',
                    pattern:/^\d+$/,
                    trigger: "blur"
                },
            ],
            begin: [
                {
                    required: true,
                    message: '请选择开卡时间',
                    
                },
            ],
            over: [
                {
                    required: true,
                    message: '请选择到期时间',
                    
                },
            ],
        });
        const modelRef = reactive<FormState>({
            type: undefined,
            Vipname: '',
            grade: 1,
            number: '',
            consume: '',
            balance: '',
            save: '',
            score: '',
            begin:'',
            over: '',
        });
        const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef);
        const onSubmit = () => {
            validate()
                .then(() => {
                    console.log(toRaw(modelRef));
                    if (flag.value == 0) {
                        MockListAdd(toRaw(modelRef)).then(res => {
                            console.log('res', res);
                            if (res.code == 200) {
                                visible.value = false;
                                ctx.emit('add')
                            }
                        })
                    }
                })
                .catch((err: any) => {
                    console.log('error', err);
                });
        };
        const onFinish = (values: any) => {
            console.log('Success:', values);
        };
        const onFinishFailed = (errorInfo: any) => {
            console.log('Failed:', errorInfo);
            flag.value = 1
        };
        onMounted(() => {
            Bus.on('add', showModal)
        })
        onUnmounted(() => {
            Bus.off('add', showModal)
        })
        
        return {
            visible,
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            validate,
            validateInfos,
            resetFields,
            modelRef,
            onSubmit,
            showModal,
            handleOk,
            onFinish,
            onFinishFailed,
        };
    },
});
</script>
<style scoped lang="less">
 .ant-picker{
    width: 394px;
 }
 .time-input{
    border: 1px solid #d9d9d9;
 }
 .time-input:hover{
    border: 1px solid #8fd4ff;
 }
 .time-input:visited{
    border: 1px solid #8fd4ff;
 }
</style>
